<template>
	<view>
		<view class="mymsg">
			<view class="photo">
				<text>头像</text>
				<image :src="headPicture"></image>
			</view>
			<view class="name">
				<text>昵称</text>
				<text>{{nickName}}</text>
			</view>
			<view class="phone">
				<text>手机号码</text>
				<text>{{phone}}</text>
			</view>
			<view class="sex">
				<text>性别</text>
				<view >
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>	
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
			</view>
			<view class="bir">
				<text>生日</text>
				<view >
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>	
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
			</view>
			
		</view>
		<view class="exit">
				<text @click="exit">退出登录</text>
			</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	
	export default {
		onShow(){
			this.phone=uni.getStorageSync("phone");
			console.log(this.phone);
			this.get();
			console.log(this.array[this.index]);
		},
		
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: 'picker',
				array: ['女', '男'],
				index: 0,
				date: currentDate,
				id:'',
				nickName:'',
				headPicture:'',
				sex:'',
				birthday:'',
				phone:''
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			sexChange(){
				http({
					url:'/editsex',
					params:{
						phone:uni.getStorageSync("phone"),
						sex:this.sex
						
					},
					success:(res)=>{
						console.log(res);
						if(res.data.msg=='修改成功'){
							uni.showToast({
								title:'修改成功',
								icon:'success'
							})
						}else{
							uni.showToast({
								title:'修改失败',
								icon:'error'
							})
						}
					}
				})
			},
			birChange(){
				http({
					url:'/editbir',
					params:{
						phone:uni.getStorageSync("phone"),
						birthday:this.birthday
					},
					success:(res)=>{
						console.log(res);
						if(res.data.msg=='修改成功'){
							uni.showToast({
								title:'修改成功',
								icon:'success'
							})
						}else{
							uni.showToast({
								title:'修改失败',
								icon:'error'
							})
						}
					}
				})
			},
			
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				if(this.index==0){
					this.sex='女';
				}
				else{
					this.sex='男';
				}
				this.sexChange()
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.birthday=this.date
				this.birChange()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			get(){
				http({
					url:'/get',
					params:{
						phone:this.phone
					},
					success:(res)=>{
						console.log(res)
						if(res.data){
							this.id=res.data.id;
							this.nickName=res.data.data[0].nickName;
							this.headPicture=res.data.data[0].headPicture;
							this.phone=res.data.data[0].phone;
							this.sex=res.data.data[0].sex;
							this.birthday=res.data.data[0].birthday;
						}
						if(this.sex=='女'){
							this.index=0;
						}else{
							this.index=1;
						}
						this.date=this.birthday;
					}
				})
			},
			exit(){
				uni.setStorageSync("status",0);
				uni.setStorageSync("phone",'');
				uni.setStorageSync("userid",'');
				uni.switchTab({
					url:'/pages/home/home'
				});
			}
			
		}
	}
</script>

<style>
page{
	background-color: rgba(242, 247, 251, 0.619607843137255);
}
.mymsg{
	background-color: #ffffff;
	width: 750rpx;
}
.mymsg>view{
	
	margin-left: 40rpx;
	height: 120rpx;
	width: 670rpx;
	border-bottom: 1px solid rgba(242, 242, 242, 1);
}
.mymsg view text:first-child{
	color: #999999;
	font-size: 34rpx;
	
}
.photo{
	border-top: 1px solid rgba(242, 242, 242, 1);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.photo text{
	width: 200rpx;
}
.photo image{
	width: 80rpx;
	height: 80rpx;
}
.name{
	display: flex;
	align-items: center;
}
.name text:first-child{
	width: 160rpx;
}
.name text:last-child{
	flex: 1;
}
.phone{
	display: flex;
	align-items: center;
}
.phone text:first-child{
	width: 160rpx;
}
.phone text:last-child{
	flex: 1;
}
.sex{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sex text{
	width: 160rpx;
	
}
.sex view{
	flex: 1;
}
.sex image{
	width: 15rpx;
	height: 25rpx;
	margin-right: 10rpx;
}
.bir{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bir text{
	width: 160rpx;
	
}
.bir view{
	flex: 1;
}
.bir image{
	width: 15rpx;
	height: 25rpx;
	margin-right: 10rpx;
}
.exit{
	bottom: 0;
	background-color: #ffffff;
	width: 750rpx;
	height: 150rpx;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.exit text{
	color: #F77214;
	width: 670rpx;
	margin: 0 40rpx;
	height: 100rpx;
	border: 1px solid #F77214;
	border-radius: 50rpx;
	font-size: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
</style>
